<template>
  <div class="bill-container">
    <!-- 统计数据卡片 -->
    <el-row :gutter="20" class="data-statistics">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="statistics-item">
            <div class="icon blue">
              <el-icon>
                <Money />
              </el-icon>
            </div>
            <div class="content">
              <div class="label">可提现金额(元)</div>
              <div class="value">{{ statistics.availableAmount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="statistics-item">
            <div class="icon green">
              <el-icon>
                <Wallet />
              </el-icon>
            </div>
            <div class="content">
              <div class="label">总交易金额(元)</div>
              <div class="value">{{ statistics.totalAmount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="statistics-item">
            <div class="icon orange">
              <el-icon>
                <Coin />
              </el-icon>
            </div>
            <div class="content">
              <div class="label">总提现金额(元)</div>
              <div class="value">{{ statistics.withdrawAmount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="statistics-item">
            <div class="icon purple">
              <el-icon>
                <Document />
              </el-icon>
            </div>
            <div class="content">
              <div class="label">总提现笔数(笔)</div>
              <div class="value">{{ statistics.withdrawCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 操作按钮 -->
    <div class="operation-bar">
      <el-button type="primary" @click="handleWithdraw">立即提现</el-button>
    </div>

    <!-- 数据表格 -->
    <el-card class="table-card">
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="序号" width="80" />
        <el-table-column prop="amount" label="金额" width="120">
          <template #default="{ row }">
            <span :class="{ red: row.amount < 0 }">{{ row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="changeAmount" label="变更前金额" width="120" />
        <el-table-column prop="afterAmount" label="变更后金额" width="120" />
        <el-table-column prop="type" label="业务类型" width="120" />
        <el-table-column prop="remark" label="备注" width="200" />
        <el-table-column prop="businessId" label="业务ID" width="200" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" fixed="right" width="100">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleView(row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Money, Wallet, Coin, Document } from '@element-plus/icons-vue'
// import type { TableInstance } from 'element-plus'

// 统计数据
const statistics = ref({
  availableAmount: 8430,
  totalAmount: 10430,
  withdrawAmount: 2000,
  withdrawCount: 16
})

// 表格数据
const tableData = ref<any>([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 获取表格数据
const getTableData = async () => {
  loading.value = true
  try {
    // TODO: 调用API获取数据
    const mockData = Array.from({ length: 10 }).map((_, index) => ({
      id: index + 1,
      amount: Math.random() > 0.5 ? 10 : -10,
      changeAmount: 0,
      afterAmount: 10,
      type: Math.random() > 0.5 ? '商品交易' : '提现',
      remark: Math.random() > 0.5 ? '买家确认收货' : '商家申请提现',
      businessId: '505886529954531',
      createTime: '2022-04-10 12:00:03'
    }))
    tableData.value = mockData
    total.value = 100
  } catch (error) {
    console.error('获取数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 页面加载时获取数据
onMounted(() => {
  getTableData()
})

// 处理分页变化
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableData()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableData()
}

// 处理提现操作
const handleWithdraw = () => {
  // TODO: 实现提现逻辑
}

// 处理查看详情
const handleView = (_row: any) => {
  // TODO: 实现查看详情逻辑
}
</script>

<style lang="scss" scoped>
.bill-container {
  padding: 20px;

  .data-statistics {
    margin-bottom: 20px;
  }

  .statistics-item {
    display: flex;
    align-items: center;
    padding: 10px;

    .icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;

      :deep(.el-icon) {
        font-size: 24px;
        color: #fff;
      }

      &.blue {
        background-color: #409eff;
      }

      &.green {
        background-color: #67c23a;
      }

      &.orange {
        background-color: #e6a23c;
      }

      &.purple {
        background-color: #909399;
      }
    }

    .content {
      .label {
        font-size: 14px;
        color: #909399;
        margin-bottom: 4px;
      }

      .value {
        font-size: 20px;
        font-weight: bold;
        color: #303133;
      }
    }
  }

  .operation-bar {
    margin-bottom: 20px;
  }

  .table-card {
    .red {
      color: #f56c6c;
    }

    .pagination-container {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
